<template>
  <el-card class="sys-schedule">
    <tag-content-header>
      <template #title>
        <span class="title-text">调度</span>
      </template>
    </tag-content-header>
    <el-form ref="editForm" :model="editForm" label-width="250px" label-position="left">
      <el-row v-for="(row, index) in fieldArray" :key="index">
        <el-col
          :span="item.paramCode.indexOf('_CYCLE') < 0 ? 14 : 10"
          class="params-star"
          v-for="item in row"
          :key="item.paramCode"
        >
          <el-form-item
            :label="item.paramName"
            :prop="item.paramCode"
            v-if="item.paramCode.indexOf('_CYCLE') < 0"
            :rules="[{ validator: validates, trigger: 'blur' }]"
          >
            <el-row>
              <el-time-picker
                v-model="editForm[item.paramCode].begin"
                value-format="HH:mm:ss"
                :readonly="!editing"
              ></el-time-picker>
              -
              <el-time-picker
                v-model="editForm[item.paramCode].end"
                value-format="HH:mm:ss"
                :readonly="!editing"
              ></el-time-picker>
            </el-row>
          </el-form-item>
          <el-form-item
            :prop="item.paramCode"
            :rules="[{ required: true, message: '间隔周期不能为空', trigger: 'blur' }]"
            v-else
          >
            <template slot="label">
              <span
                >间隔周期(小时)<el-tooltip
                  effect="dark"
                  content="为0：不间隔；>0：为实际的间隔小时数。如果>24，折算成天数，不 > 744 ，即 31 天。"
                  placement="top"
                  :enterable="false"
                >
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </span>
            </template>
            <el-input-number
              v-model="editForm[item.paramCode]"
              :disabled="!editing"
              :precision="0"
              :min="0"
              :max="744"
              placeholder="请输入间隔周期"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right">
          <template v-if="!editing">
            <el-button type="primary" @click="editing = true">修改</el-button>
          </template>
          <template v-else>
            <el-button @click="cancelEdit">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </template>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      params: [],
      editing: false,
      fieldArray: [],
      editForm: {},
      validates: (rule, value, callback) => {
        if (!value.begin) return callback(new Error('开始时间不能为空'))
        else if (!value.end) return callback(new Error('结束时间不能为空'))
        else callback()
      }
    }
  },
  watch: {
    params(value) {
      this.init(value)
    }
  },
  methods: {
    getParams(moduleCode) {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysParameter/module'),
        method: 'get',
        params: this.$ajax.setParams({
          moduleCode
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.params = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    init(params) {
      this.fieldArray = []
      for (let i = 0; i < params.length; i += 2) this.fieldArray.push(params.slice(i, i + 2))
      params.forEach(v => {
        if (v.paramCode.indexOf('_CYCLE') < 0) {
          this.$set(this.editForm, v.paramCode, {
            begin: v.paramValue.split('|')[0],
            end: v.paramValue.split('|')[1]
          })
        } else {
          this.$set(this.editForm, v.paramCode, Number(v.paramValue))
        }
      })
    },
    cancelEdit() {
      this.reset(this.params)
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.editing = false
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = []
          Object.keys(this.editForm).forEach(key => {
            this.params.forEach(v => {
              if (key === v.paramCode)
                params.push({
                  moduleCode: v.moduleCode,
                  paramCmnt: v.paramCmnt,
                  paramCode: v.paramCode,
                  paramDesc: v.paramDesc,
                  paramName: v.paramName,
                  paramValue:
                    key.indexOf('_CYCLE') < 0
                      ? this.editForm[v.paramCode].begin + '|' + this.editForm[v.paramCode].end
                      : this.editForm[v.paramCode].toString()
                })
            })
          })
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysParameter'),
            method: 'put',
            data: this.$ajax.setData(params, false, 'json')
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.editing = false
              this.getParams(this.$route.query.tabName)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    reset(data) {
      Object.keys(this.editForm).forEach(key => {
        data.forEach(v => {
          if (key === v.paramCode) {
            if (key.indexOf('_CYCLE') < 0) {
              this.editForm[key].begin = v.paramValue.split('|')[0]
              this.editForm[key].end = v.paramValue.split('|')[1]
            } else {
              this.editForm[key] = Number(v.paramValue)
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.sys-schedule {
  .el-button--primary {
    background-color: #4d81ea;
    border-color: #4d81ea;
  }
}
</style>
